<template>
	<view class="new_sche">
		<view class="fllow_form">
			<view><text>*</text>日程标题</view>
			<view class="form_right">
				<input type="text" :class="title ? 'valueActive' : '' " class="inputtext" v-model="title"  placeholder-style="font-size:30rpx;color: #999;" placeholder="填写日程标题" />
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>开始时间</view>
			<!-- #ifdef MP-WEIXIN -->
			<picker @change="changeStartTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="start_time ? 'valueActive' : '' ">{{start_time ? start_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayStartTime" mode="date">
				<view class="form_right">
					<view :class="start_time ? 'valueActive' : '' ">{{start_time ? start_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view><text>*</text>结束时间</view>
			<!-- #ifdef MP-WEIXIN -->
			<picker @change="changeEndTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="end_time ? 'valueActive' : '' ">{{end_time ? end_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayEndTime" mode="date">
				<view class="form_right">
					<view :class="end_time ? 'valueActive' : '' ">{{end_time ? end_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view><text>*</text>自动结束</view>
			<view class="form_right">
				<radio-group @change="changeAuto" class="labellist">
					<label class="" class="labelbox">
						<view>
							<radio color="#ff7800" :value="1"/>
						</view>
						<view>是</view>
					</label>
					<label class="" class="labelbox">
						<view>
							<radio color="#ff7800" :value="0"/>
						</view>
						<view>否</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>日程状态</view>
			<picker @change="changeSchedule" :range="schedule_list" :value="status">
				<view class="form_right">
					<view :class="schedule_list[status] ? 'valueActive' : '' ">{{schedule_list[status] ? schedule_list[status]  : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>紧要程度</view>
			<picker @change="changeLevel" :range="level_list" :range-key="'name'" :value="levelIndex">
				<view class="form_right">
					<view :class="level_list[levelIndex] ? 'valueActive' : '' ">{{level_list[levelIndex] ? level_list[levelIndex].name : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>提醒时间</view>
			<picker @change="changeRemind" :range="remind_list" :value="remindtype">
				<view class="form_right">
					<view :class="remind_list[remindtype] ? 'valueActive' : '' ">{{remind_list[remindtype] ? remind_list[remindtype] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>关联类型</view>
			<view class="form_right">
				<radio-group @change="changeRelation" class="labellist">
					<label class="" v-for="(item, index) in relation_List" :key="index" class="labelbox">
						<view>
							<radio color="#ff7800" :value="item.id" :checked="item.id == relation_type" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="fllow_form" v-if="relationName">
			<view><text>*</text>{{relationName}}</view>
			<view class="form_right" @click="toSelectGuanglian">
				<view :class="guanlianName ? 'valueActive' : '' ">{{guanlianName ? guanlianName : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		
		<view class="fllow_area">
			<view class="area_head">备注</view>
			<textarea v-model="remark" :class="remark ? 'valueActive' : '' " placeholder="备注" placeholder-style="color:#999" />
		</view>
		<view class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(toAdd)">
			保存
		</view>
		
		
		<view class="popmask" v-if="guanlianShow">
			<view class="popbox">
				<!-- <view class="popsearch">
					<u-search @change="searchName" placeholder="请输入关键词搜索"></u-search>
				</view> -->
				<view class="listwarp">
					<scroll-view scroll-y class="listscroll">
						<view class="liwarp" v-for="(item,index) in guanlian_list" :key="index" @click="selectItem(item)">
							<view class="warpleft">
								<view class="name">名称:{{item.name}}</view>
								<view class="number">编号：{{item.id}}</view>
								<!-- <view class="guishu">归属人员：{{item.owner_staff.name}}</view> -->
							</view>
							<label class="radio"><radio value="r1" :checked="relation_id == item.id" /></label>
						</view>
						<view class="noData" v-if="guanlian_list.length == 0">暂无数据</view>
					</scroll-view>
				</view>
				<view class="btnlist">
					<view class="btn firbtn" @click="closePop">确定</view>
					<view class="btn secbtn" @click="closePop">取消</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script> 
	import { netPrevCustomer, netLianxiren, netSelectContract } from '@/api/kehu.js'
	import { netAddSchedule } from '@/api/index.js'
	import { netGetNopageClueslist } from '@/api/clues.js'
	import { dateTimePicker, getMonthDay } from '@/util/dateTimePicker.js'
	export default {
		data() {
			return {
				schedule_list:['未开始','执行中','已结束','已取消'],   //日程状态
				level_list:[
					{ id:1, name:'重要'},
					{ id:2, name:'紧急'},
					{ id:3, name:'普通'},
					{ id:4, name:'重要且紧急'},
				],   //紧要程度
				levelIndex:null,
				remind_list:['准时提醒','5分钟前','15分钟前','30分钟前','一个小时前','两个小时前','一天前','两天前','一周前'],
				relation_List:[
					{ id:1, name:'客户'},
					{ id:2, name:'联系人'},
					{ id:3, name:'合同'},
					{ id:4, name:'线索'}
				],   //关联类型
				
				guanlian_list:[],   //关联 人列表 
				guanlianShow:false,
				guanlianName:'',   //关联  名称 
				
				title:'',  //标题
				start_time:'',   //开始时间
				end_time:'', //结束时间
				status:'',   //日程状态 
				auto_end:'',  //自动结束  0否   1是
				level:'',   //紧要程度
				remindtype:'',   //提醒时间
				remark:'',   //备注
				relation_type:'',   //关联类型
				relation_id:'',   //关联人  id
				relationName:'',   //关联 名称
				
				dateTimeArray:null,
				dateTime:null,
				dateArr:null,
				noClick:true,
			}
		},
		onLoad() {
			this.initTime()
		},
		methods: {
			initTime(){
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();
				let lastDate = obj.dateArray.pop()
			 
				this.dateTimeArray=obj.dateTimeArray
				this.dateArr = obj.dateArray
				this.dateTime=obj.dateTime
			},
			//开始时间
			changeStartTime(e) {
				let arr = e.detail.value
				if(arr.includes(-1)){
					uni.showToast({
						title:'请选择正确的时间',
						icon:'none'
					})
					return
				}
				let str = this.handleTime(arr)
				this.start_time = str
			},
			changeAlipayStartTime(e) {
				this.start_time = e.detail.value
			},
			//结束 时间
			changeEndTime(e) {
				let arr = e.detail.value
				if(arr.includes(-1)){
					uni.showToast({
						title:'请选择正确的时间',
						icon:'none'
					})
					return
				}
				let str = this.handleTime(arr)
				this.end_time = str
			},
			changeAlipayEndTime(e) {
				this.end_time = e.detail.value
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year+'-'+month+'-'+day+' '+ hour+':'+minu
				return str
			},
			//是否  自动 结束
			changeAuto(e) {
				this.auto_end = e.detail.value
			},
			//日程状态
			changeSchedule(e) {
				this.status = e.detail.value
			},
			//紧要程度
			changeLevel(e) {
				this.levelIndex = e.detail.value
				this.level = this.level_list[e.detail.value].id
			},
			//提醒时间
			changeRemind(e) {
				this.remindtype = e.detail.value
			},
			//关联类型
			changeRelation(e) {
				console.log(e)
				this.relation_id = ''
				this.guanlianid = ''
				this.guanlianName = ''
				this.guanlian_list = []
				this.relation_type = e.detail.value
				if(this.relation_type == 1) {
					//客户
					this.relationName = '关联客户'
					this.kehuList()
				}else if(this.relation_type == 2) {
					//联系人
					this.relationName = '关联联系人'
					this.getLianxiren()
				}else if(this.relation_type == 3) {
					//合同
					this.relationName = '关联合同'
					this.getContract()
				}else if(this.relation_type == 4){
					//线索
					this.relationName = '关联线索'
					this.getClue()
				}
			},
			searchName(e) {
				
			},
			//客户
			kehuList() {
				netPrevCustomer().then(res=>{
					this.guanlian_list = res.data
				})
			},
			//联系人
			getLianxiren() {
				netLianxiren().then(res=>{
					this.guanlian_list = res.data
				})
			},
			//合同
			getContract() {
				netSelectContract().then(res=>{
					this.guanlian_list = res.data
				})
			},
			//线索
			getClue() {
				netGetNopageClueslist().then(res=>{
					this.guanlian_list = res.data
				})
			},
			toSelectGuanglian() {
				this.guanlianShow = true
			},
			closePop() {
				this.guanlianShow = false
			},
			selectItem(item) {
				this.relation_id = item.id
				this.guanlianName = item.name
			},
			//保存
			toAdd() {
				let {
					title,  //标题
					start_time,   //开始时间
					end_time, //结束时间
					status,   //日程状态 
					auto_end,  //自动结束  0否   1是
					level,   //紧要程度
					remindtype,   //提醒时间
					remark,   //备注
					relation_type,   //关联类型
					relation_id,   //关联人  id
				} = this
				if(!title){
					uni.showToast({
						title:'请输入标题',
						icon:'none'
					})
					return
				}
				if(!start_time){
					uni.showToast({
						title:'请选择开始时间',
						icon:'none'
					})
					return
				}
				if(!end_time){
					uni.showToast({
						title:'请选择结束时间',
						icon:'none'
					})
					return
				}
				if(!status){
					uni.showToast({
						title:'请选择日程状态',
						icon:'none'
					})
					return
				}
				if(!auto_end){
					uni.showToast({
						title:'请选择是否自动结束',
						icon:'none'
					})
					return
				}
				if(!level){
					uni.showToast({
						title:'请选择紧要程度',
						icon:'none'
					})
					return
				}
				if(!remindtype){
					uni.showToast({
						title:'请选择提醒时间',
						icon:'none'
					})
					return
				}
				if(!relation_type){
					uni.showToast({
						title:'请选择关联类型',
						icon:'none'
					})
					return
				}
				if(!relation_id){
					uni.showToast({
						title:'请选择'+this.relationName,
						icon:'none'
					})
					return
				}
				let params = {
					title,  //标题
					start_time,   //开始时间
					end_time, //结束时间
					status,   //日程状态 
					auto_end,  //自动结束  0否   1是
					level,   //紧要程度
					remindtype,   //提醒时间
					remark,   //备注
					relation_type,   //关联类型
					relation_id,   //关联人  id
				}
				netAddSchedule(params).then(res=>{
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.valueActive{
		color:#333;
	}
	.labellist{
		display: flex;
		justify-content: flex-start;
		.labelbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	radio{
		transform: scale(0.6);
	}
</style>
<style lang="scss" scoped>
.new_sche {
	font-size: 28rpx;
	.shce_title {
		padding: 0 24rpx;
		margin: 30rpx 0;
		background-color: #fff;
		input {
			height: 100rpx;
			line-height: 100rpx;
		}
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 0 24rpx;
		.form_right {
			display: flex;
			align-items: center;
			color: #999;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
			.inputtext{
			// 	height: 100rpx;
			// 	line-height: 100rpx;
				text-align: right;
			}
			
		}
		.theme {
			color: #5ca9fe;
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.form_input {
			// input {
			// 	height: 100rpx;
			// 	line-height: 100rpx;
			// 	text-align: right;
			// }
		}
		.fllow_button {
			margin-top: 15rpx;
		}
	}
	.fllow_area {
		background-color: #fff;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			line-height: 100rpx;
			text {
				color: #f00;
			}
		}
		textarea {
			width: 100%;
			height: 300rpx;
			background: #f8f8f8;
		}
	}
}
.popmask{
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
	z-index: 2;
	.popbox{
		position: absolute;
		left:0;
		bottom:0;
		background:#fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding:20rpx 24rpx;
		width:750rpx;
		.popsearch{
			
		}
		.listwarp{
			width:702rpx;
			height:700rpx;
			.listscroll{
				width:100%;
				height:700rpx;
				background:#f5f5f5;
				.liwarp{
					width:640rpx;
					padding:20rpx 30rpx;
					margin:20rpx auto;
					background:#fff;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.warpleft{
						flex: 1;
						.name{
							font-size:24rpx;
							color:#333;
						}
						.number{
							font-size:24rpx;
							color:#999;
							margin:15rpx 0;
						}
						.guishu{
							font-size:24rpx;
							color:#666;
						}
					}
				}
				.noData{
					font-size:26rpx;
					color:#666;
					text-align: center;
					padding-top:100rpx;
				}
			}
		}
		.btnlist{
			width:750rpx;
			display: flex;
			justify-content: space-around;
			padding:30rpx 0;
			.btn{
				width:200rpx;
				height:60rpx;
				border-radius: 30rpx;
				font-size:24rpx;
				color:#fff;
				text-align: center;
				line-height: 60rpx;
			}
			.firbtn{
				background:#03aa96;
			}
			.secbtn{
				background:#ff7800;
			}
		}
	}
}
</style>
